<!-- 返佣页面 - 包含邀请链接和邀请记录 -->
<template>
    <div class="referral-container">
      <!-- 邀请链接卡片 -->
      <el-card class="invite-card">
        <template #header>
          <div class="card-header">
            <span>我的邀请链接</span>
          </div>
        </template>
        <div class="invite-content">
          <div class="invite-info">
            <div class="invite-stats">
              <div class="stat-item">
                <div class="stat-value">{{ referralStats.totalInvites || 0 }}</div>
                <div class="stat-label">总邀请人数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ referralStats.totalCommission || 0 }}</div>
                <div class="stat-label">累计佣金(元)</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ referralStats.pendingCommission || 0 }}</div>
                <div class="stat-label">待结算佣金(元)</div>
              </div>
            </div>
            <el-divider />
            <div class="invite-link-section">
              <div class="link-label">您的专属邀请链接</div>
              <div class="link-input">
                <el-input v-model="inviteLink" readonly>
                  <template #append>
                    <el-button type="primary" @click="copyInviteLink">复制</el-button>
                  </template>
                </el-input>
              </div>
            </div>
            <el-divider />
            <div class="commission-rules">
              <h3>佣金规则</h3>
              <p>1. 当您邀请的用户成功注册并消费，您将获得消费金额的10%作为佣金</p>
              <p>2. 佣金将在被邀请用户消费成功后的次月1日结算到您的账户余额</p>
              <p>3. 您可以在"返佣记录"中查看详细的邀请明细和佣金情况</p>
              <p>4. 本平台保留对佣金规则的最终解释权</p>
            </div>
          </div>
        </div>
      </el-card>
  
      <!-- 邀请记录卡片 -->
      <el-card class="records-card">
        <template #header>
          <div class="card-header">
            <span>返佣记录</span>
            <div class="header-actions">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleDateRangeChange"
              />
              <el-button type="primary" @click="fetchReferralRecords">查询</el-button>
            </div>
          </div>
        </template>
  
        <el-table
          v-loading="loading"
          :data="referralRecords"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column prop="invitedUser" label="被邀请用户" />
          <el-table-column prop="registerTime" label="注册时间" />
          <el-table-column prop="firstRechargeTime" label="消费时间" />
          <el-table-column prop="rechargeAmount" label="消费金额(元)" />
          <el-table-column prop="commission" label="佣金(元)" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.status === '已结算' ? 'success' : 'warning'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
  
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  
  // 状态变量
  const loading = ref(false);
  const inviteLink = ref('https://example.com/#/register?inviter=123456');
  const referralStats = ref({
    totalInvites: 15,
    totalCommission: 256.8,
    pendingCommission: 45.2
  });
  const referralRecords = ref([]);
  const dateRange = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  
  // 生成邀请链接（使用静态数据）
  const generateInviteLink = async () => {
    try {
      // 使用静态邀请链接
      inviteLink.value = 'https://example.com/#/register?inviter=123456';
    } catch (error) {
      console.error('生成邀请链接失败:', error);
      ElMessage.error('生成邀请链接失败，请稍后重试');
    }
  };
  
  // 复制邀请链接
  const copyInviteLink = () => {
    navigator.clipboard.writeText(inviteLink.value)
      .then(() => {
        ElMessage.success('邀请链接已复制到剪贴板');
      })
      .catch(() => {
        ElMessage.error('复制失败，请手动复制');
      });
  };
  
  // 获取返佣统计数据（使用静态数据）
  const fetchReferralStats = async () => {
    // 使用静态数据
    referralStats.value = {
      totalInvites: 15,
      totalCommission: 256.8,
      pendingCommission: 45.2
    };
  };
  
  // 获取邀请记录（使用静态数据）
  const fetchReferralRecords = async () => {
    loading.value = true;
    try {
      // 使用静态数据
      setTimeout(() => {
        referralRecords.value = [
          {
            invitedUser: 'user123',
            registerTime: '2023-05-15 14:30:25',
            firstRechargeTime: '2023-05-16 09:12:36',
            rechargeAmount: 100,
            commission: 10,
            status: '已结算'
          },
          {
            invitedUser: 'zhang_wei',
            registerTime: '2023-06-02 10:22:15',
            firstRechargeTime: '2023-06-02 10:35:42',
            rechargeAmount: 200,
            commission: 20,
            status: '已结算'
          },
          {
            invitedUser: 'li_ming',
            registerTime: '2023-07-18 16:45:33',
            firstRechargeTime: '2023-07-19 08:05:17',
            rechargeAmount: 500,
            commission: 50,
            status: '已结算'
          },
          {
            invitedUser: 'wang_fang',
            registerTime: '2023-08-25 11:17:52',
            firstRechargeTime: '2023-08-25 14:22:08',
            rechargeAmount: 300,
            commission: 30,
            status: '已结算'
          },
          {
            invitedUser: 'zhao_jun',
            registerTime: '2023-09-10 09:30:45',
            firstRechargeTime: '2023-09-10 16:40:22',
            rechargeAmount: 1000,
            commission: 100,
            status: '已结算'
          },
          {
            invitedUser: 'chen_yi',
            registerTime: '2023-10-05 13:25:18',
            firstRechargeTime: '-',
            rechargeAmount: 0,
            commission: 0,
            status: '待审核'
          },
          {
            invitedUser: 'liu_hua',
            registerTime: '2023-10-22 15:12:36',
            firstRechargeTime: '2023-10-22 15:30:10',
            rechargeAmount: 452,
            commission: 45.2,
            status: '待结算'
          }
        ];
        total.value = 7;
        loading.value = false;
      }, 500);
    } catch (error) {
      console.error('加载邀请记录失败:', error);
      ElMessage.error('加载邀请记录失败，请稍后重试');
      loading.value = false;
    }
  };
  
  // 分页处理
  const handleSizeChange = (val) => {
    pageSize.value = val;
    fetchReferralRecords();
  };
  
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchReferralRecords();
  };
  
  // 日期范围变化
  const handleDateRangeChange = (val) => {
    dateRange.value = val;
  };
  
  // 页面加载时初始化
  onMounted(() => {
    generateInviteLink();
    fetchReferralStats();
    fetchReferralRecords();
  });
  </script>
  
  <style scoped>
  .referral-container {
    padding: 20px;
  }
  
  .invite-card,
  .records-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-actions {
    display: flex;
    gap: 10px;
  }
  
  .invite-stats {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
  }
  
  .stat-item {
    text-align: center;
  }
  
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;
  }
  
  .stat-label {
    font-size: 14px;
    color: #606266;
    margin-top: 5px;
  }
  
  .invite-link-section {
    margin: 20px 0;
  }
  
  .link-label {
    margin-bottom: 10px;
    font-weight: bold;
  }
  
  .link-input {
    margin-bottom: 20px;
  }
  
  .commission-rules {
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 4px;
  }
  
  .commission-rules h3 {
    margin-top: 0;
    color: #303133;
  }
  
  .commission-rules p {
    margin: 10px 0;
    color: #606266;
    line-height: 1.6;
  }
  
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  </style> 